<h1>Flight Search (Reactive) !</h1>

<!--
round-trip
-->

<form novalidate [formGroup]="filter">
  <h2>Dynamisches Formular</h2>
  @for (item of formDesc; track item) {
    <div>
      <label>{{ item.label }}</label>
      <input [formControlName]="item.name" class="form-control" />
    </div>
  }

  <h2>Statisches Formular</h2>

  <div class="form-group">
    <label>From</label>
    <input class="form-control" formControlName="from" />

    @if (!filter.controls.from.valid && !filter.controls.from.pending) {
      <div>
        Validierungsfehler. Bitte prüfen Sie Ihre Eingaben.
      </div>
    }

    @if (filter.controls.from.hasError('city')) {
      <div>
        Diese Stadt wird nicht angefolgen
      </div>
    }

    @if (filter.controls.from.hasError('required')) {
      <div>
        Dieses Feld ist ein Pflichtfeld
      </div>
    }
  </div>

  <div class="form-group">
    <label>To</label>
    <input class="form-control" formControlName="to" name="to" />
  </div>
  <div class="form-group">
    <button
      class="btn btn-primary"
      name="btnSearch"
      [disabled]="!filter.valid"
      (click)="search()"
      >
      Search
    </button>
  </div>
</form>
<!--
[ngClass]="{ 'active': f == selectedFlight }"
-->
<!--
<table class="table table-striped">

  <tr *ngFor="let f of flights" [ngStyle]="{ 'background-color': (f == selectedFlight) ? 'orange': '' } ">
    <td>{{f.id}}</td>
    <td>{{f.from | city:'short' }}</td>
    <td>{{f.to | city:'long' }}</td>
    <td>{{f.date | date:'dd.MM.yyyy HH:mm'}}</td>
    <td><a (click)="select(f)">Auswählen</a></td>
  </tr>
</table>
-->

<div class="row">
  @for (f of flights; track f) {
    <div class="col-sm-6 col-md-4 col-lg-3 ">
      <flight-card [item]="f" [(selectedItem)]="selectedFlight"> </flight-card>
      <!--
      [selectedItem]="selectedFlight"
      (selectedItemChange)="selectedFlight = $event"
      -->
      <alt-flight-card
        [item]="f"
        [selected]="f == selectedFlight"
        (selectedChange)="selectedFlight = f"
        >
      </alt-flight-card>
    </div>
  }
</div>

<!--
<flight-list [flights]="flights" [(selectedFlight)]="selectedFlight">
</flight-list>
-->

<div class="row" style="margin-top:40px">
  <pre>
    Warenkorb
    ----------------------
    {{ selectedFlight | json }}
    </pre
    >
  </div>
